<template>
    <div>
        <div ref="chartDom" class="container"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            chartInstance: null
        };
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.chartDom);

            const categories = ['法学', '材料化学', '会计学', '材料物理', '产品设计', '计算机科学与技术', '光电信息科学与工程', '摄影', '环境工程', '数字媒体技术'];
            const data = [8.33, 8.11, 7.94, 7.14, 6.82, 6.48, 5.66, 4.76, 4.55, 4.21];
            const colors = ['#f94144', '#f3722c', '#f8961e', '#f9c74f', '#90be6d'];

            const option = {
                backgroundColor: '#0b1f42',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    textStyle: {
                        color: "#ccc"
                    }
                },
                legend: {
                    show: false
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLine: { lineStyle: { color: '#ffffff' } },
                    splitLine: { show: false },
                    axisLabel: { color: '#ffffff', fontSize: 10 }
                },
                yAxis: {
                    type: 'category',
                    data: categories,
                    axisLine: { lineStyle: { color: '#ffffff' } },
                    axisLabel: { color: '#ffffff', fontSize: 10 },
                },
                grid: {
                    top: '2%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                series: [
                    {
                        name: '比例',
                        type: 'bar',
                        barWidth: '60%',
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '{c} %',
                            color: '#ffffff',
                            fontSize: 10
                        },
                        data: data.map((value, index) => ({
                            value,
                            itemStyle: {
                                color: colors[index % colors.length],
                                borderRadius: [0, 10, 10, 0]
                            }
                        }))
                    }
                ]
            };

            this.chartInstance.setOption(option);
        }
    }
};
</script>

<style scoped lang="less">
.container {
    width: 24vw;
    height: 24vh;
}
</style>